import { useState, useEffect } from 'react'
import './index.scss'
// import { Button } from 'antd';
import icon from "/src/assets/react.svg"
import * as echarts from 'echarts';

function DivFunc() {
  const [data, _] = useState(

    //统计
    {
      numberList: [
        {
          name: '今日访问量',
          sum: '4230', icon: null,
        }, {
          name: '今日发布量',
          sum: '2240', icon: null,
        }, {
          name: '今日评论量',
          sum: '60', icon: null,
        }, {
          name: '今日用户量',
          sum: '20', icon: null,
        }, {
          name: '今日订单量',
          sum: '100', icon: null,
        }, {
          name: '今日交易量',
          sum: '90', icon: null,
        }
      ]
    }
  )
  const option = {
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };
  const option2 = {
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '15%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },

    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  const option3 = {
    // title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  useEffect(() => {
    const Chart1 = echarts.init(document.getElementById("chart1"), {
      renderer: 'svg'
    });
    Chart1.setOption(option);

    const Chart2 = echarts.init(document.getElementById("chart2"), {
      renderer: 'svg'
    });
    Chart2.setOption(option2);

    const Chart3 = echarts.init(document.getElementById("chart3"), {
      renderer: 'svg'
    });
    Chart3.setOption(option3);

  }, []);

  return (
    <div className='overview_body'>
      {/* 统计数据 */}
      <div className='number'>
        {
          data.numberList.map((obj, i) =>
            <div className='data_box  media align' key={i}>
              <div className='box align' key={i}>
                <div className='box_title align'>
                  <img className='icon' src={obj.icon ?? icon}></img>
                  <span className='title'>{obj.name}</span>
                </div>
                <span className='data'>{obj.sum}</span>
              </div>
            </div >
          )
        }
      </div >

      {/* 图表列表 */}
      <div className='tbody align media'>
        {/* 竖图 */}
        <div className='chart' id="chart1"></div>
        {/* 则线条 */}
        <div className='chart chart_2' id="chart2"></div>
        {/* 饼图 */}
        <div className='chart chart_2' id="chart3"></div>
      </div>

      <div className='tbody align media'>
        <a href='https://gitee.com/Linwute/admin-demo/tree/main/vite+react+andt-ui/admin-react'>Demo 下载地址： https://gitee.com/Linwute/admin-demo/tree/main/vite+react+andt-ui/admin-react</a>
      </div>

    </div>
  )
}

export default DivFunc
